<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :topHeight='"5vh"'
  >
  <warning :width='"93%"' style="margin-bottom:20px;" >
        <p>
          若未找到对应考场或考场数据错误，请联系客服。客服电话：028-85031088 微信:Jchl_KF（18202879868）！
        </p>
   </warning>
    <div class="formarea">
      <el-form
        ref="kcform"
        :model="kcforms"
        :rules="rules"
        size="medium"
        label-width="100px"

      >
        <el-row>
          <el-form-item label="同城考场" prop="title">
            <el-select
              @change='changekc'
              v-model="kcforms.title"
              placeholder="请选择或搜索考场"
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in kcnameOptions"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对应科目" prop="subject_type" >
            <el-checkbox-group v-model="kcforms.subject_type" size="medium" >
              <el-checkbox
                v-for="(item, index) in subitemOptions"
                :key="index"
                :label="item.value"
                :disabled="true"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="自有考场" prop="is_own">
            <el-radio-group v-model="kcforms.is_own" size="medium">
              <el-radio
                v-for="(item, index) in iskcOptions"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="封面图" prop="head_img"  class="uploadimg">
            <div class="uploadimg-box upload" v-show="isshowDisablebox">
              <i class="el-icon-plus"></i>
            </div>
             <uploadimg v-show="!isshowDisablebox" :imgModel='kcforms.head_img' :isdeleteicon='false' :isDisable='true' class="upload">
                <span slot="text"></span>
             </uploadimg>
          
          </el-form-item>
          <el-form-item label="地址" prop="address" >
            <el-input
              placeholder="请点击右边选择地图来选择地址"
              :disabled="true"
              v-model="kcforms.address"
            >
              <template slot="append">
                <!-- <el-button @click="selectmap" disabled>选择地图</el-button> -->
              </template>
            </el-input>
            <mapDialog
              v-if="isshowmap"
              :isshowmapDialog="isshowmap"
              @closemap="closemap"
              @affirmMaps="affirmMap"
              :userSelectinfo="selectmapinfo"
            ></mapDialog>
             <!-- 地图 -->
             <maps class="maps" v-show="isshowmaps" :mapData='mapData'></maps>
          </el-form-item>
      
       
        </el-row>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
import warning from '@/components/warnins'
import maps from '@/components/map/map'
import commonformdialog from '@/components/commondialog/commondialog'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//api
import {getOption,createRelation,readData,updateRelation} from '@/api/exam'
export default {
  data() {
    return {
      //是否显示地图组件
      isshowmaps:false,
      // 选择的位置信息
      mapData:{},
      //是否显示禁用上传div
      isshowDisablebox:true,
      //选中的id
      examId:'',
      //用户选择的地图
      selectmapinfo: {},
      //是否显示地图
      isshowmap: false,
      kcforms: {
        title: '',
        subject_type: [],
        is_own:'',
        //上传图片
        head_img: '',
        //地址
        address: '',

      },
      //编辑ID
      examSchoolId:'',
      //是否为禁用表单
      isDisable:false,
      rules: {
        title:[
           {
            required: true,
            message: '请选择地址',
            trigger: 'change',
          },
        ],
        head_img:[
           {
            required: false,
            message: '请选择考场,会显示考场图片',
            trigger: 'change',
          },
        ],
        kcname: [
          {
            required: true,
            message: '请选择考场',
            trigger: 'change',
          },
        ],
        subject_type: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个对应科目',
            trigger: 'change',
          },
        ],
        is_own: [
          {
            required: true,
            message: '自有考场不能为空',
            trigger: 'change',
          },
        ],
      },
      kcnameOptions: [],
      subitemOptions: [
        {
          label: '科目一',
          value: 1,
        },
        {
          label: '科目二',
          value: 2,
        },
        {
          label: '科目三',
          value: 3,
        },
        {
          label: '科目四',
          value: 4,
        },
      ],
      iskcOptions: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 2,
        },
      ],
    }
  },
  components: {
    commonformdialog,
    mapDialog,
    uploadimg,
    maps,
    warning
  },
  props: {
    //是否显示删除按钮
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType:{
      type:Number,
      default:0
    }
  },
  methods: {
    //获取考场选项
    async getkcOption(){
      let data = await getOption()
      this.kcnameOptions  = data.data
      console.log(this.kcnameOptions)
    },
    //切换考场
    changekc(val){
       //显示上传图片
      this.isshowDisablebox = false
      if(!val){
        //重新跳转到初始位置
        this.mapData = {
          lng:104.066177,
          lat:30.658499
        }
        this.isshowDisablebox = true
        this.$refs['kcform'].resetFields()
        return
      }
      //显示地图组件
      this.isshowmaps = true
      let selectItem = this.kcnameOptions.find((item,index)=>{
        if(item.id==val){
          return item
        }
      })
      //赋值给地图
      this.mapData = selectItem
      let {address,head_img,lat,lng,subject_type,id} = selectItem
      this.examId = id
      console.log(subject_type.value)
      this.kcforms.subject_type = subject_type.value
      this.kcforms.head_img = head_img
      let newobj = {
        address,
        lat,
        lng
      }
      this.selectmapinfo  =  newobj
      //赋值地址
      this.kcforms.address = address
    },
    //用户选择地图
    selectmap() {
      //打开弹窗
      this.isshowmap = true
    },
    //关闭弹窗
    closemap() {

      this.isshowmap = false
    },
    //用户确认选择地图
    affirmMap(params) {
       this.selectmapinfo = params
      this.kcforms.address = params.address
      this.lat = params.lat
      this.lng = params.lng
      this.isshowmap = false
    },
    closeDialog() {
      //重置表单
      this.$refs['kcform'].resetFields()
      this.selectmapinfo = {}
       //隐藏地图组件
      this.isshowmaps = false
      this.$emit('closedialog')
    },
    confirmbtn() {
      //提交表单
       this.$refs['kcform'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        let {is_own} = this.kcforms
        let params = {
          examId:this.examId,
          isOwn:is_own,

        }
        if(this.formType == 0){
          console.log('新增')
            let data = await createRelation(params)
          if(data.code=='0000'){
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
          }
        }else if(this.formType == 2){
          params.examId=this.id
          params.id=this.examSchoolId
          console.log(params)
           let data = await updateRelation(params)
                    if(data.code=='0000'){
                      this.$message({
                        type: 'success',
                        message: '新增成功!'
                      });
                    }
            }
        else{
          console.log('编辑')
        }
        //清空数据
         this.$refs['kcform'].resetFields()
        this.$emit('confirm')
      })
    },
  },
  mounted(){
    //获取考场数据
    this.getkcOption()
    this.$bus.on("editforkc",async (val)=>{
        //获取要编辑的id
        let id = val.id
        //保存查看编辑ID
        this.id= val.id
        this.examSchoolId=val.examSchoolId
        let data = await readData({id:id})
        //显示地图
        this.isshowmaps = true
        this.kcforms = data.data
        //显示查看图片
        this.isshowDisablebox = false
        this.kcforms.subject_type = data.data.subject_type.value
        this.mapData = data.data
        console.log(data.data)
    });
  },
  destroyed(){
    this.$bus.off("editforkc")
  },
  watch:{
    //是否禁用表单
    formType(val){
      if(val==1){
        this.isDisable = true
      }else{
        this.isDisable = false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.upload{
  cursor: move;
}
.uploadimg{
  &:hover{
     cursor: not-allowed;
  }

}
.uploadimg-box{
  width: 75px;
  height: 75px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  i{
    font-size: 20px;
    color: #999;
  }
}
.maps{
  border-radius: 10px;
  margin-top: 20px;
}
</style>
